<template>
  <h1>1.组件的基本写法</h1>
  <p>name:{{ person.name }}</p>
  <p>age:{{ person.age }}</p>
  <hr />
  <p>name:{{ name }}</p>
  <p>age:{{ age }}</p>

  <button @click="changePerson">修改</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
 
});
</script>

<script lang="ts" setup>
import {reactive,toRefs } from "vue";
/* 
-如果直接解析代理对象，得到变量，则直接失去响应式能力
-如果想要解析代理对象的属性，并且还要保证响应能力存在，则需要使用toRefs的方法
-从toRefs解构出来的数据其实是ref对象，所以修改的时候要添加.value
*/
const person = reactive({
  name:"小文",
  age:21,
});
let{name,age} =toRefs(person);
console.log(name,age);

const changePerson =() =>{
  // 这个写两个同时修改了
  // 这个是没有解构出来的用法
  // person.name ="芳姐";
  // person.age++;

  // 这个是解析出来的写法，直接使用属性名,xxx
  // 要想响应式数据，现在是ref基本数据，就是要加上.value
  age.value++;

}
</script>
<style scoped></style>
